import React, { useState, useEffect } from 'react'

function App() {
  const [ proList, setProList ] = useState([])
  // hooks中没有生命周期的钩子函数
  // 如果需要执行类似于异步请求数据等操作的副作用函数
  // 可以使用 useEffect 这个hook
  // useEffect(() => {}) 
  // useEffect 其实相当于三个生命周期的合体
  // componentDidMount
  // componentDidUpdate
  // cnmponentWillUnmount
  // useEffect 可以书写过个，每一个都会执行，如果遇到添加了第二个参数为[]，此useEffect只会执行一次
  
   // useEffect(() => {}, []) 加一个[],只执行 componentDidMount
  // useEffect(() => {}, [count]) 加一个[count],当count的值发生改变时，再执行 componentDidUpdate
  // useEffect(() => {}) 不写第二个参数,一定会执行执行 componentDidUpdate
  // useEffect(() => { return () => {}}) // return () => {} --- componentWillUnmount
  
  // useEffect(() => {
  //   fetch('http://121.89.205.189/api/pro/list')
  //     .then( res => res.json() ) // 转换为json数据格式
  //     .then( res => {
  //       console.log(res) // 一直打印数据 componentDidMount componentDidUpdate
  //       setProList(res.data)
  //     })
  // })
  useEffect(() => {
    console.log('11111')
    fetch('http://121.89.205.189/api/pro/list')
      .then( res => res.json() ) // 转换为json数据格式
      .then( res => {
        console.log(res) // 只打印了一次 componentDidMount
        setProList(res.data)
      })
  }, []) // useEffect的第二个参数是关键点，[]数组表示只执行一次

  useEffect(() => {
    console.log('2222')
    return () => { // componentWillUnmount

    }
  })
  return (
    <div>
      {
        proList && proList.map(item => {
          return (
          <div key = { item.proid }> { item.proname } </div>
          )
        })
      }
    </div>
  )
}

export default App
